﻿@namespace Bit.BlazorUI.Demo.Client.Core.Pages
@inherits AppComponentBase

<BitText Typography="BitTypography.H3" Gutter>bit BlazorUI components</BitText>

<div class="list-group">
    <div class="list-col">
        <div class="list">
            <BitText Typography="BitTypography.H6">Buttons</BitText>
            <BitLink Href="/components/actionbutton" title="ActionButton">
                <BitText Typography="BitTypography.Subtitle1">ActionButton</BitText>
            </BitLink>
            <BitLink Href="/components/button" title="Button">
                <BitText Typography="BitTypography.Subtitle1">Button</BitText>
            </BitLink>
            <BitLink Href="/components/button-group" title="ButtonGroup">
                <BitText Typography="BitTypography.Subtitle1">ButtonGroup</BitText>
            </BitLink>
            <BitLink Href="/components/menubutton" title="MenuButton">
                <BitText Typography="BitTypography.Subtitle1">MenuButton</BitText>
            </BitLink>
            <BitLink Href="/components/togglebutton" title="ToggleButton">
                <BitText Typography="BitTypography.Subtitle1">ToggleButton</BitText>
            </BitLink>
        </div>
        <div class="list">
            <BitText Typography="BitTypography.H6">Inputs</BitText>
            <BitLink Href="/components/calendar" title="Calendar" Style="display: flex">
                <BitText Typography="BitTypography.Subtitle1">Calendar</BitText>
            </BitLink>
            <BitLink Href="/components/checkbox" title="Checkbox">
                <BitText Typography="BitTypography.Subtitle1">Checkbox</BitText>
            </BitLink>
            <BitLink Href="/components/choicegroup" title="ChoiceGroup">
                <BitText Typography="BitTypography.Subtitle1">ChoiceGroup</BitText>
            </BitLink>
            <BitLink Href="/components/dropdown" title="Dropdown" Style="display: flex">
                <BitText Typography="BitTypography.Subtitle1">Dropdown</BitText>
                <BitText Typography="BitTypography.Subtitle2" Class="featured">featured</BitText>
            </BitLink>
            <BitLink Href="/components/fileupload" title="FileUpload" Style="display: flex">
                <BitText Typography="BitTypography.Subtitle1">FileUpload</BitText>
            </BitLink>
            <BitLink Href="/components/numberfield" title="NumberField">
                <BitText Typography="BitTypography.Subtitle1">NumberField</BitText>
            </BitLink>
            <BitLink Href="/components/otpinput" title="OtpInput">
                <BitText Typography="BitTypography.Subtitle1">OtpInput</BitText>
            </BitLink>
            <BitLink Href="/components/rating" title="Rating">
                <BitText Typography="BitTypography.Subtitle1">Rating</BitText>
            </BitLink>
            <BitLink Href="/components/searchbox" title="SearchBox">
                <BitText Typography="BitTypography.Subtitle1">SearchBox</BitText>
            </BitLink>
            <BitLink Href="/components/slider" title="Slider">
                <BitText Typography="BitTypography.Subtitle1">Slider</BitText>
            </BitLink>
            <BitLink Href="/components/textfield" title="TextField">
                <BitText Typography="BitTypography.Subtitle1">TextField</BitText>
            </BitLink>
            <BitLink Href="/components/toggle" title="Toggle (Switch)">
                <BitText Typography="BitTypography.Subtitle1">Toggle (Switch)</BitText>
            </BitLink>
            <BitText Typography="BitTypography.H6">Pickers</BitText>
            <BitLink Href="/components/circulartimepicker" title="CircularTimePicker" Style="display: flex">
                <BitText Typography="BitTypography.Subtitle1">CircularTimePicker</BitText>
            </BitLink>
            <BitLink Href="/components/colorpicker" title="ColorPicker" Style="display: flex">
                <BitText Typography="BitTypography.Subtitle1">ColorPicker</BitText>
            </BitLink>
            <BitLink Href="/components/datepicker" title="DatePicker" Style="display: flex">
                <BitText Typography="BitTypography.Subtitle1">DatePicker</BitText>
                <BitText Typography="BitTypography.Subtitle2" Class="featured">featured</BitText>
            </BitLink>
            <BitLink Href="/components/daterangepicker" title="DateRangePicker" Style="display: flex">
                <BitText Typography="BitTypography.Subtitle1">DateRangePicker</BitText>
                <BitText Typography="BitTypography.Subtitle2" Class="featured">featured</BitText>
            </BitLink>
            <BitLink Href="/components/timepicker" title="TimePicker" Style="display: flex">
                <BitText Typography="BitTypography.Subtitle1">TimePicker</BitText>
            </BitLink>
        </div>
        <div class="list">
            <BitText Typography="BitTypography.H6">Layouts</BitText>
            <BitLink Href="/components/footer" title="Footer">
                <BitText Typography="BitTypography.Subtitle1">Footer</BitText>
            </BitLink>
            <BitLink Href="/components/grid" title="Grid">
                <BitText Typography="BitTypography.Subtitle1">Grid</BitText>
            </BitLink>
            <BitLink Href="/components/header" title="Header">
                <BitText Typography="BitTypography.Subtitle1">Header</BitText>
            </BitLink>
            <BitLink Href="/components/layout" title="Layout">
                <BitText Typography="BitTypography.Subtitle1">Layout</BitText>
            </BitLink>
            <BitLink Href="/components/spacer" title="Spacer">
                <BitText Typography="BitTypography.Subtitle1">Spacer</BitText>
            </BitLink>
            <BitLink Href="/components/stack" title="Stack">
                <BitText Typography="BitTypography.Subtitle1">Stack</BitText>
            </BitLink>
        </div>
    </div>
    <div class="list-col">
        <div class="list">
            <BitText Typography="BitTypography.H6">Lists</BitText>
            <BitLink Href="/components/basiclist" title="BasicList">
                <BitText Typography="BitTypography.Subtitle1">BasicList</BitText>
            </BitLink>
            <BitLink Href="/components/carousel" title="Carousel" Style="display: flex">
                <BitText Typography="BitTypography.Subtitle1">Carousel</BitText>
            </BitLink>
            <BitLink Href="/components/swiper" title="Swiper" Style="display: flex">
                <BitText Typography="BitTypography.Subtitle1">Swiper</BitText>
            </BitLink>
            <BitLink Href="/components/timeline" title="Timeline" Style="display: flex">
                <BitText Typography="BitTypography.Subtitle1">Timeline</BitText>
            </BitLink>
        </div>
        <div class="list">
            <BitText Typography="BitTypography.H6">Navs</BitText>
            <BitLink Href="/components/breadcrumb" title="Breadcrumb">
                <BitText Typography="BitTypography.Subtitle1">Breadcrumb</BitText>
            </BitLink>
            <BitLink Href="/components/dropmenu" title="DropMenu">
                <BitText Typography="BitTypography.Subtitle1">DropMenu</BitText>
            </BitLink>
            <BitLink Href="/components/nav" title="Nav (TreeList)" Style="display: flex">
                <BitText Typography="BitTypography.Subtitle1">Nav (TreeList)</BitText>
                <BitText Typography="BitTypography.Subtitle2" Class="featured">featured</BitText>
            </BitLink>
            <BitLink Href="/components/navbar" title="NavBar">
                <BitText Typography="BitTypography.Subtitle1">NavBar</BitText>
            </BitLink>
            <BitLink Href="/components/pagination" title="Pagination">
                <BitText Typography="BitTypography.Subtitle1">Pagination</BitText>
            </BitLink>
            <BitLink Href="/components/pivot" title="Pivot (Tab)">
                <BitText Typography="BitTypography.Subtitle1">Pivot (Tab)</BitText>
            </BitLink>
        </div>
        <div class="list">
            <BitText Typography="BitTypography.H6">Notifications</BitText>
            <BitLink Href="/components/badge" title="Badge">
                <BitText Typography="BitTypography.Subtitle1">Badge</BitText>
            </BitLink>
            <BitLink Href="/components/message" title="Message">
                <BitText Typography="BitTypography.Subtitle1">Message</BitText>
            </BitLink>
            <BitLink Href="/components/persona" title="Persona (AvatarView)">
                <BitText Typography="BitTypography.Subtitle1">Persona (AvatarView)</BitText>
            </BitLink>
            <BitLink Href="/components/snackbar" title="SnackBar">
                <BitText Typography="BitTypography.Subtitle1">SnackBar</BitText>
            </BitLink>
            <BitLink Href="/components/tag" title="Tag">
                <BitText Typography="BitTypography.Subtitle1">Tag</BitText>
            </BitLink>
        </div>
        <div class="list">
            <BitText Typography="BitTypography.H6">Progress</BitText>
            <BitLink Href="/components/loading" title="Loading">
                <BitText Typography="BitTypography.Subtitle1">Loading</BitText>
            </BitLink>
            <BitLink Href="/components/progress" title="Progress">
                <BitText Typography="BitTypography.Subtitle1">Progress</BitText>
            </BitLink>
            <BitLink Href="/components/shimmer" title="Shimmer (Skeleton)">
                <BitText Typography="BitTypography.Subtitle1">Shimmer (Skeleton)</BitText>
            </BitLink>
        </div>
        <div class="list">
            <BitText Typography="BitTypography.H6">Surfaces</BitText>
            <BitLink Href="/components/accordion" title="Accordion (Expander)">
                <BitText Typography="BitTypography.Subtitle1">Accordion (Expander)</BitText>
            </BitLink>
            <BitLink Href="/components/callout" title="Callout (popover)">
                <BitText Typography="BitTypography.Subtitle1">Callout (popover)</BitText>
            </BitLink>
            <BitLink Href="/components/card" title="Card">
                <BitText Typography="BitTypography.Subtitle1">Card</BitText>
            </BitLink>
            <BitLink Href="/components/collapse" title="Collapse">
                <BitText Typography="BitTypography.Subtitle1">Collapse</BitText>
            </BitLink>
            <BitLink Href="/components/dialog" title="Dialog">
                <BitText Typography="BitTypography.Subtitle1">Dialog</BitText>
            </BitLink>
            <BitLink Href="/components/modal" title="Modal">
                <BitText Typography="BitTypography.Subtitle1">Modal</BitText>
            </BitLink>
            <BitLink Href="/components/panel" title="Panel">
                <BitText Typography="BitTypography.Subtitle1">Panel</BitText>
            </BitLink>
            <BitLink Href="/components/scrollablepane" title="ScrollablePane">
                <BitText Typography="BitTypography.Subtitle1">ScrollablePane</BitText>
            </BitLink>
            <BitLink Href="/components/splitter" title="Splitter">
                <BitText Typography="BitTypography.Subtitle1">Splitter</BitText>
            </BitLink>
            <BitLink Href="/components/tooltip" title="Tooltip">
                <BitText Typography="BitTypography.Subtitle1">Tooltip</BitText>
            </BitLink>
        </div>
    </div>
    <div class="list-col">
        <div class="list">
            <BitText Typography="BitTypography.H6">Utilities</BitText>
            <BitLink Href="/components/element" title="Element">
                <BitText Typography="BitTypography.Subtitle1">Element</BitText>
            </BitLink>
            <BitLink Href="/components/icon" title="Icon">
                <BitText Typography="BitTypography.Subtitle1">Icon</BitText>
            </BitLink>
            <BitLink Href="/components/image" title="Image">
                <BitText Typography="BitTypography.Subtitle1">Image</BitText>
            </BitLink>
            <BitLink Href="/components/label" title="Label">
                <BitText Typography="BitTypography.Subtitle1">Label</BitText>
            </BitLink>
            <BitLink Href="/components/link" title="Link">
                <BitText Typography="BitTypography.Subtitle1">Link</BitText>
            </BitLink>
            <BitLink Href="/components/mediaquery" title="MediaQuery">
                <BitText Typography="BitTypography.Subtitle1">MediaQuery</BitText>
            </BitLink>
            <BitLink Href="/components/overlay" title="Overlay">
                <BitText Typography="BitTypography.Subtitle1">Overlay</BitText>
            </BitLink>
            <BitLink Href="/components/pulltorefresh" title="PullToRefresh">
                <BitText Typography="BitTypography.Subtitle1">PullToRefresh</BitText>
            </BitLink>
            <BitLink Href="/components/separator" title="Separator">
                <BitText Typography="BitTypography.Subtitle1">Separator</BitText>
            </BitLink>
            <BitLink Href="/components/sticky" title="Sticky">
                <BitText Typography="BitTypography.Subtitle1">Sticky</BitText>
            </BitLink>
            <BitLink Href="/components/swipetrap" title="SwipeTrap">
                <BitText Typography="BitTypography.Subtitle1">SwipeTrap</BitText>
            </BitLink>
            <BitLink Href="/components/text" title="Text">
                <BitText Typography="BitTypography.Subtitle1">Text</BitText>
            </BitLink>
        </div>
        <div class="list">
            <BitText Typography="BitTypography.H6">Extras</BitText>
            <BitLink Href="/components/appshell" title="AppShell" Style="display: flex">
                <BitText Typography="BitTypography.Subtitle1">AppShell</BitText>
            </BitLink>
            <BitLink Href="/components/datagrid" title="DataGrid" Style="display: flex">
                <BitText Typography="BitTypography.Subtitle1">DataGrid</BitText>
            </BitLink>
            <BitLink Href="/components/errorboundary" title="ErrorBoundary" Style="display: flex">
                <BitText Typography="BitTypography.Subtitle1">ErrorBoundary</BitText>
            </BitLink>
            <BitLink Href="/components/flag" title="Flag" Style="display: flex">
                <BitText Typography="BitTypography.Subtitle1">Flag</BitText>
            </BitLink>
            <BitLink Href="/components/infinitescrolling" title="InfiniteScrolling" Style="display: flex">
                <BitText Typography="BitTypography.Subtitle1">InfiniteScrolling</BitText>
            </BitLink>
            <BitLink Href="/components/markdowneditor" title="MarkdownEditor" Style="display: flex">
                <BitText Typography="BitTypography.Subtitle1">MarkdownEditor</BitText>
            </BitLink>
            <BitLink Href="/components/markdownviewer" title="MarkdownViewer" Style="display: flex">
                <BitText Typography="BitTypography.Subtitle1">MarkdownViewer</BitText>
            </BitLink>
            <BitLink Href="/components/messagebox" title="MessageBox" Style="display: flex">
                <BitText Typography="BitTypography.Subtitle1">MessageBox</BitText>
            </BitLink>
            <BitLink Href="/components/chart" title="Chart" Style="display: flex">
                <BitText Typography="BitTypography.Subtitle1">Chart</BitText>
            </BitLink>
            <BitLink Href="/components/navpanel" title="NavPanel" Style="display: flex">
                <BitText Typography="BitTypography.Subtitle1">NavPanel</BitText>
            </BitLink>
            <BitLink Href="/components/pdfreader" title="PdfReader" Style="display: flex">
                <BitText Typography="BitTypography.Subtitle1">PdfReader</BitText>
            </BitLink>
            <BitLink Href="/components/propanel" title="ProPanel" Style="display: flex">
                <BitText Typography="BitTypography.Subtitle1">ProPanel</BitText>
            </BitLink>
            <BitLink Href="/components/richtexteditor" title="RichTextEditor" Style="display: flex">
                <BitText Typography="BitTypography.Subtitle1">RichTextEditor</BitText>
            </BitLink>
            <BitLink Href="/components/modalservice" title="ModalService" Style="display: flex">
                <BitText Typography="BitTypography.Subtitle1">ModalService</BitText>
            </BitLink>
        </div>
    </div>
</div>